// import React from 'react'

// function Index() {
//   return (
//     <div className='
//     w-12/12
//     h-[700px]
//     bg-blue-300
//     dark:bg-red-100
//     dark:text-slate-200
//     '>
//       哈哈哈哈哈哈哈哈哈哈哈哈哈哈
//     </div>
//   )
// }
// // ....

// export default Index
import React, { useState } from "react";
import { Input, Select, Space } from "antd";
import request from "axios";
import md5 from "md5";
function Index() {
  let [list, setlist] = useState<any>("");
  let [qieh, setqieh] = useState<any>("zh");
  let [arr, setarr] = useState<any>("");

  const handleChange = (value: string) => {
    const salt = new Date().getTime();
    request.get("/api/api", {
        params: {
          q: list,
          from: "auto",
          to: qieh,
          appKey: "5799aec3cfcfbe30",
          salt,
          sign: md5(
            `5799aec3cfcfbe30${list}${salt}wFmfcn9igpEEgx0QmCArjjLqKjVJceGT`
          ),
        },
      })
      .then((res) => {
        //因为translation 是一个数组，所以我们需要取数组的第一个元素
        console.log(res);
        setarr(res.data.translation[0])
      });
  };
  return (
    <div>

        <Input
                value={list}
                style={{ width: "200px" }}
                onChange={(e) => setlist(e.target.value)}
            />
      <Select
        defaultValue="lucy"
        style={{ width: 120 }}
        onChange={handleChange}
          value={qieh}
        options={[
          { value: "zh", label: "中" },
          { value: "en", label: "英" },
        ]}
      />
      {arr}
    </div>
  );
}

export default Index;
